<?php $this->load->view('layout/header'); ?>
<script type="text/javascript" charset="utf-8" src="/static/bk/ueditor/ueditor.config.js"></script>
<script type="text/javascript" charset="utf-8" src="/static/bk/ueditor/ueditor.all.min.js"></script>
<script type="text/javascript" charset="utf-8" src="/static/bk/ueditor/lang/zh-cn/zh-cn.js"></script>
<script type="text/javascript" charset="utf-8" src="/static/bk/ueditor/lang/zh-cn/zh-cn.js"></script>
<script language="javascript" type="text/javascript" src="/static/bk/datepicker/WdatePicker.js"></script>
<script type="text/javascript">
    //<![CDATA[
    var theForm = document.forms['form1'];
    if (!theForm) {
        theForm = document.form1;
    }
    function __doPostBack(eventTarget, eventArgument) {
        if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
            theForm.__EVENTTARGET.value = eventTarget;
            theForm.__EVENTARGUMENT.value = eventArgument;
            theForm.submit();
        }
    }
    //]]>
</script>
<script type="text/javascript">
    //<![CDATA[
    function WebForm_OnSubmit() {
        if (typeof(ValidatorOnSubmit) == "function" && ValidatorOnSubmit() == false) return false;
        return true;
    }
    //]]>
</script>
<form name="form1" method="post" action="<?php echo site_url('survey/surveyitem_action').'/'.$info['surveyitemid'];?>" onsubmit="javascript:return WebForm_OnSubmit();" id="form1">
    <div>
    </div>
    <div id="container">
        <table width="100%" border="0" cellpadding="0" cellspacing="0" class="table_form">
            <tr class="table_form_title">
                <td colspan="4">
                    <span id="lblTitle">添加</span>调查选项
                </td>
            </tr>
            <tr class="table_form_row">
                <td style="width: 15%" align="right">
                    <span class="star">*</span>选项名称：
                </td>
                <td>
                    <input type="text" name="itemname" id="itemname" value="<?php echo $info['itemname']?>">
                    <span id="itemname_tips" style="color: Red;display: none">不能为空</span>
                </td>
            </tr>
            <tr class="table_form_row">
                <td style="width: 15%" align="right">
                    <span class="star">*</span>选项类型：
                </td>
                <td>
                    <select name="typeid" id="typeid">
                        <option value="">请选择</option>
                        <option value="1" <?php if($info['typeid']==1){echo 'selected';}?>>单选</option>
                        <option value="2" <?php if($info['typeid']==2){echo 'selected';}?>>多选</option>
                        <option value="3" <?php if($info['typeid']==3){echo 'selected';}?>>文本</option>
                    </select>
                    <span id="typeid_tips" style="color: Red;display: none">不能为空</span>
                </td>
            </tr>
            <tr class="table_form_row">
                <td style="width: 15%" align="right">
                    选择项(供单选和多选使用)：
                </td>
                <td>
                    <table width="100%" border="0" cellpadding="0" cellspacing="0" class="table_cancel">
                        <tbody>
                        <tr>
                            <td>
                                <table width="100%" border="0" cellspacing="0" cellpadding="0">
                                    <tbody><tr>
                                        <td>
                                            名称：<input name="optionname" type="text" id="option">
                                            <a href="javascript:;"><input type="button" value="添加选项" id="add_option"></a>
                                            <span id="option_tips" style="color:Red;display:none;">不能为空</span>
                                        </td>
                                    </tr>
                                    </tbody>
                                </table>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                    <div>
                        <table class="GridView" cellspacing="0" cellpadding="4" border="0" id="gvSurveyItemOption" style="width:100%;border-collapse:collapse;">
                            <tbody>
                            <tr class="GridView_HeaderStyle">
                                <th scope="col">名称</th><th scope="col">排序号</th><th scope="col">编辑</th><th scope="col">删除</th>
                            </tr>
                            <?php if(!empty($option)){ ?>
                                <?php foreach($option as $key=>$val): ?>
                                    <tr class="GridView_RowStyle">
                                        <td align="center" style="width:20%;">
                                            <span id="itemoptionname<?php echo $key+1;?>"><?php echo $val['itemoptionname']?></span>
                                            <input type="hidden" id="itemoptionname_h<?php echo $key+1;?>" name="itemoption[name][]" value="<?php echo $val['itemoptionname']?>">
                                        </td>
                                        <td align="center" style="width:20%;">
                                            <span id="itemoptionlistid<?php echo $key+1;?>"><?php echo $val['listid']?></span>
                                            <input type="hidden" id="itemoptionlistid_h<?php echo $key+1;?>" name="itemoption[listid][]" value="<?php echo $val['listid']?>">
                                        </td>
                                        <td align="center" style="width:20%;">
                                            <a href="javascript:;" id="edit_btn<?php echo $key+1?>" onclick="edit_span(<?php echo $key+1?>)">编辑</a>
                                        </td>
                                        <td align="center" style="width:20%;">
                                            <a onclick="remove_tr(<?php echo $key+1?>)" id="del_btn<?php echo $key+1?>" href="javascript:;">删除</a>
                                        </td>
                                    </tr>
                                <?php endforeach; ?>
                            <?php } ?>
                            </tbody>
                        </table>
                    </div>
                </td>
            </tr>
            <tr class="table_form_row">
                <td style="width: 15%" align="right">
                    <span class="star">*</span>排序：
                </td>
                <td>
                    <input type="text" name="listid" value="<?php if($info['listid']){echo $info['listid'];}else{echo 0;}?>" id="listid">
                    <span id="listid_tips" style="color:Red;display:none;">不能为空</span>
                </td>
            </tr>
            <tr class="table_form_row">
                <td style="width: 15%" align="right">
                    是否关闭：
                </td>
                <td>
                    <input type="radio" name="isclose" value="1" <?php if(isset($info['isclose']) && $info['isclose'] == '1'){echo 'checked'; }?>>是
                    <input type="radio" name="isclose" value="0" <?php if(!isset($info['isclose']) || $info['isclose'] == '0'){echo 'checked'; }?>>否
                </td>
            </tr>
            <tr class="table_form_btn">
                <td align="right">
                    &nbsp;
                </td>
                <td colspan="3">
                    <input type="submit" value="保存" onclick="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions(&quot;btnSave&quot;, &quot;&quot;, true, &quot;&quot;, &quot;&quot;, false, false))" id="btnSave" />
                    <input type="button" value="返回" onclick="javascript:history.go(-1);" />
                    <span id="errMsg" style="color:Red;"></span>
                </td>
            </tr>
        </table>
    </div>
</form>
<script type="text/javascript">
    $('#form1').submit(function() {
        var is = true;
        if(!selete_tips($('#typeid'))){
            is = false;
        }
        if (!input_tips($('#itemname'))) {
            is = false;
        }
        return is;
    });

    $("#add_option").click(function(){
        var option_name = $("#option").val().trim();
        if(option_name == ''){
            $("#option_tips").css('display','');
        }else{
            $("#option_tips").css('display','none');
            var len = $(".GridView_RowStyle").length;
            if(len == 0){
                var id = 1;
            }
            var html = '<tr class="GridView_RowStyle">'+
                '<td align="center" style="width:20%;"><span id="itemoptionname'+parseInt(len)+parseInt(1)+'">'+option_name+'</span>'+
                '<input type="hidden" name="itemoption[name][]" id="itemoptionname_h'+parseInt(len)+parseInt(1)+'" value="'+option_name+'"></td>'+
                '<td align="center" style="width:20%;"><span id="itemoptionlistid'+parseInt(len)+parseInt(1)+'">1</span>'+
                '<input type="hidden" id="itemoptionlistid_h'+parseInt(len)+parseInt(1)+'" name="itemoption[listid][]" value="1"></td>'+
                '<td align="center" style="width:20%;"><a href="javascript:;" id="edit_btn'+parseInt(len)+parseInt(1)+'" onclick="edit_span('+parseInt(len)+parseInt(1)+')">编辑</a></td>'+
                '<td align="center" style="width:20%;"><a onclick="remove_tr('+id+')" id="del_btn'+id+'" href="javascript:;">删除</a>'+
                '</td></tr>';
            $(".GridView").append(html)
            $("#option").val('');
        }
    });

    function remove_tr(id){
        if(confirm("您真的要删除此记录吗?")){
            $('#del_btn'+id).parent().parent().remove();
        }
    }

    function edit_span(id){
        $('#itemoptionname'+id).css('display','none');
        var optionname = $("#itemoptionname_h"+id).val();
        $('#itemoptionname'+id).parent().append('<input type="text" id="itemoptionname_d'+id+'" value="'+optionname+'">');
        $('#itemoptionlistid'+id).css('display','none');
        var listid = $("#itemoptionlistid_h"+id).val();
        $('#itemoptionlistid'+id).parent().append('<input type="text" id="itemoptionlistid_d'+id+'" value="'+listid+'">');

        var html = '<a href="javascript:;" id="save_data" onclick="save_data('+id+')">保存</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="javascript:;" onclick="cancle_data('+id+')">取消</a>';
        $('#edit_btn'+id).parent().html(html);
    }

    function save_data(id){
        var new_optionname = $("#itemoptionname_d"+id).val();
        $("#itemoptionname"+id).html(new_optionname);
        $("#itemoptionname"+id).css('display','inline');
        $("#itemoptionname_h"+id).val(new_optionname);
        $("#itemoptionname_d"+id).remove();

        var new_listid = $("#itemoptionlistid_d"+id).val();
        $("#itemoptionlistid"+id).html(new_listid);
        $("#itemoptionlistid"+id).css('display','inline');
        $("#itemoptionlistid_h"+id).val(new_listid);
        $("#itemoptionlistid_d"+id).remove();

        $("#save_data").parent().html('<a href="javascript:;" id="edit_btn'+id+'" onclick="edit_span('+id+')">编辑</a>');
    }

    function cancle_data(id){
        $("#itemoptionname"+id).css('display','inline');
        $("#itemoptionname_d"+id).remove();
        $("#itemoptionlistid"+id).css('display','inline');
        $("#itemoptionlistid_d"+id).remove();
        $("#save_data").parent().html('<a href="javascript:;" id="edit_btn'+id+'" onclick="edit_span('+id+')">编辑</a>');
    }
</script>
</body>
</html>

